<template>
  <div class="panel-left-2 common-panpel" :style="{ height: vHeight }">
    <div class="angle angle-left-top"></div>
    <div class="angle angle-left-bottom"></div>
    <div class="angle angle-right-top"></div>
    <div class="angle angle-right-bottom"></div>
    <div style="padding: 25px">
      <div class="subTit">
        <img :src="require('@/assets/icon/' + this.cImg)" width="28px" />{{
          title
        }}
      </div>
      <div class="enterpriseGrowthBox">
        <ul>
          <li v-for="(item, index) in growthArr" :key="index">
            <div class="tit">{{ item.title }}</div>
            <div style="overflow: hidden">
              <span class="serialNum">{{ index + 1 }}</span>
              <div class="progressBg">
                <div
                  class="progress"
                  :style="{ width: item.progress + '%' }"
                ></div>
              </div>
              <span class="num">增长{{ parseFloat(item.progress) }}%</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 标题左侧图片
    cImg: {
      type: String,
      default: "icon-enterpriseGrowth.png",
    },
    title: {
      type: String,
      default: "企业类型占比",
    },
    vHeight: {
      type: String,
      default: "514px",    
    },
    growthArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {
  },
};
</script>
<style lang='scss' scoped>
    // 进度条
    .enterpriseGrowthBox {
      padding: 0 0 0 35px;
  
      ul li {
        overflow: hidden;
        line-height: 42px;
      }
  
      .tit {
        font-size: 23px;
        font-weight: bold;
        position: relative;
        top: 10px;
        left: 50px;
      }
  
      .num {
        color: #60f8ff;
        font-size: 23px;
        font-weight: bold;
        float: right;
      }
  
      .serialNum {
        background: url("../../assets/icon/icon-circular.png") no-repeat;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #030c2c;
        font-size: 23px;
        font-weight: 700;
        position: relative;
        top: 5px;
      }
  
      .progressBg {
        width: 325px;
        height: 5.5px;
        background: #141b66;
        border-radius: 2px;
        display: inline-block;
        position: relative;
        bottom: 5px;
  
        .progress {
          background: linear-gradient(
            90deg,
            #0088ff 0%,
            #00f2fe 48%,
            #fcffc0 100%
          );
          border-radius: 2px;
          height: 5.5px;
        }
      }
    }
</style>